<!--售票员销量统计的横向柱状图-->
<template>
    <div class="com-container">
        <div class="com-chart" ref="seller_ref"></div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        name: "Seller",
        data(){
            return{
                chartInstance:null,
                allData:null,//服务器返回的数据
                currentPage:1,//当前显示的页数
                totalPage:0,//总页数
                timerId:null,//定时器标识
            }
        },
        computed: { ...mapState(['theme']) },
        created(){
            //注册回调函数
            this.$socket.registerCallBack("sellerData",this.getData);
        },
        mounted(){
            this.initChart();
            //this.getData();
            //发送数据给服务器，告诉服务器，我现在需要数据
            this.$socket.send({
                action:'getData',
                socketType:'sellerData',
                chartName:'seller',
                value:''
            });
            window.addEventListener('resize',this.screenAdapter);
            //在页面加载完成忠厚，主动进行屏幕的适配
            this.screenAdapter();
        },
        destroy(){
            //停止定时器
            clearInterval(this.timerId);
            //在组件销毁的时候，将窗口监听器取消掉
            window.removeEventListener('resize',this.screenAdapter);
            this.$socket.unRegisterCallBack("sellerData")
        },
        methods:{
            //初始化echartInstance对象
            initChart(){
                this.chartInstance=this.echarts.init(this.$refs.seller_ref,this.theme);
                //对图表初始化配置的控制
                const initOption={
                    //标题
                    title:{
                        text:'┃ 售票员业绩排行',
                        top:20,
                        left:20
                    },
                    //坐标轴
                    grid:{
                        top:'20%',
                        left:'3%',
                        right:'6%',
                        bottom:'3%',
                        containLabel:true   //设置距离包括图表上的文字
                    },
                    xAxis:{
                        type:'value'
                    },
                    yAxis:{
                        type:'category',
                    },
                    //提示工具
                    tooltip:{
                        trigger:'axis',
                        axisPointer:{
                            type:'line',
                            z:0,
                            lineStyle:{
                                color:'#2D3443'
                            }
                        }
                    },
                    //条目
                    series:[
                        {
                            type:'bar',
                            //条目上的文字
                            label:{
                                show:true,
                                position:'right',
                                textStyle:{
                                    color:'white'
                                }
                            },
                            //每一个柱子样式
                            itemStyle:{
                                //指明颜色渐变的方向
                                //指明不同百分比之下颜色的值
                                //echart中的颜色渐变对象----参数(指明颜色渐变的方向,指明不同百分比之下颜色的值)
                                color:new this.echarts.graphic.LinearGradient(0,0,1,0,[
                                    //百分之0状态下的颜色值
                                    {
                                        offset:0,
                                        color:'#5052EE'
                                    },
                                    //状态100%下的颜色值
                                    {
                                        offset:1,
                                        color:'#AB6EE5'
                                    }
                                ]),
                            }
                        }
                    ]
                };
                this.chartInstance.setOption(initOption);
                //对图表对象进行鼠标事件的监听
                this.chartInstance.on('mouseover',()=>{
                    //鼠标移入，轮播定时器停止
                    clearInterval(this.timerId);
                });
                this.chartInstance.on('mouseout',()=>{
                    //鼠标移入，轮播定时器开启
                    this.startInterval();
                });
            },
            //获取服务器数据
            getData(ret){
                /*await this.axios.get("/order/querySellerOrder").then(res=>{
                    this.allData=res.data;
                });*/
                this.allData=ret;
                //对数组进行排序
                this.allData.sort((a,b)=>{
                    return a.value-b.value;//从小到大的顺序排序
                });
                //计算总页数(3个一页)
                this.totalPage=this.totalPage.length % 3 === 0 ? this.allData.length/3 : this.allData.length/3 +1;
                this.updateChart();
                //启动定时器
                this.startInterval()
            },
            //更新图表
            updateChart(){
                const start=(this.currentPage-1)*3;
                const end=(this.currentPage*3);
                const showData=this.allData.slice(start,end);
                const sellerNames=showData.map((item)=>{
                    return item.name
                });
                const sellerValues=showData.map((item)=>{
                    return item.value
                });
                const dataOption={
                    yAxis:{
                        data:sellerNames
                    },
                    //条目
                    series:[
                        {
                            data:sellerValues,
                        }
                    ]
                };
                this.chartInstance.setOption(dataOption);
            },
            startInterval(){//定时换页更新图表数据
                if (this.timerId) {
                    clearInterval(this.timerId);
                }
                this.timerId=setInterval(()=>{
                    this.currentPage++;
                    if (this.currentPage > this.totalPage) {
                        this.currentPage=1;
                    }
                    this.updateChart();
                },3000)
            },
            //当浏览器的大小发生变化的时候，调用该方法，来完成屏幕的适配
            screenAdapter(){
                //console.log(this.$refs.seller_ref.offsetWidth);
                const  titleFontSize=this.$refs.seller_ref.offsetWidth/100 * 3.6;
                //和分辨率大小相关的配置项
                const  adapterOption={
                    //标题
                    title:{
                        textStyle:{
                            fontSize:titleFontSize
                        },
                    },
                    //提示工具
                    tooltip:{
                        axisPointer:{
                            lineStyle:{
                                width:titleFontSize,
                            }
                        }
                    },
                    //条目
                    series:[
                        {
                            barWidth:titleFontSize,
                            //每一个柱子样式
                            itemStyle:{
                                barBorderRadius:[0,titleFontSize/2,titleFontSize/2,0],
                            }
                        }
                    ]
                };
                this.chartInstance.setOption(adapterOption);
                //手动的调用图表的resize方法
                this.chartInstance.resize();
            },
        },
        watch:{
            theme(){
                //console.log("主题切换");
                this.chartInstance.dispose();//销毁当前图表
                this.initChart();//以切换后的主题显示图表
                this.screenAdapter();//完成屏幕适配
                this.updateChart();//更新图表的展示
            }
        }
    }
</script>

<style scoped>
    .com-container{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .com-chart{
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 20px;
    }
</style>

